<template>
	<view style="margin-bottom: 200rpx;">
	<!--pages/cal/cal.wxml-->
	<view class="screen">{{result}}</view>
	<view class="content">
		<view class="buttonGroup">
			<button :id="id1" @click="clickButton" class="buttonitem color1" hover-class="shadow">清除</button>
			<button :id="id2"  @click="clickButton" class="buttonitem color1" hover-class="shadow">回退</button>
			<button :id="id3"  @click="time" class="buttonitem color1" hover-class="shadow">
				<icon type="waiting" color="#66CC33"></icon>
			</button>
			<button :id="id4"  @click="clickButton" class="buttonitem color2" hover-class="shadow1">÷</button>
		</view>

		<view class="buttonGroup">
			<button :id="id17"  @click="clickButton" class="buttonitem color3" hover-class="shadow7">7</button>
			<button :id="id18"  @click="clickButton" class="buttonitem color3" hover-class="shadow8">8</button>
			<button :id="id19"  @click="clickButton" class="buttonitem color3" hover-class="shadow9">9</button>
			<button :id="id5"  @click="clickButton" class="buttonitem color2" hover-class="shadow1">×</button>
		</view>

		<view class="buttonGroup">
			<button :id="id14"  @click="clickButton" class="buttonitem color3" hover-class="shadow4">4</button>
			<button :id="id15"  @click="clickButton" class="buttonitem color3" hover-class="shadow5">5</button>
			<button :id="id16"  @click="clickButton" class="buttonitem color3" hover-class="shadow6">6</button>
			<button :id="id6"  @click="clickButton" class="buttonitem color2" hover-class="shadow1">-</button>
		</view>

		<view class="buttonGroup">
			<button :id="id11"  @click="clickButton" class="buttonitem color3" hover-class="shadow1">1</button>
			<button :id="id12"  @click="clickButton" class="buttonitem color3" hover-class="shadow2">2</button>
			<button :id="id13"  @click="clickButton" class="buttonitem color3" hover-class="shadow3">3</button>
			<button :id="id7"  @click="clickButton" class="buttonitem color2" hover-class="shadow1">+</button>
		</view>

		<view class="buttonGroup">
			<button :id="id10"  @click="clickButton" class="buttonitem1 color3" hover-class="shadow0">0</button>
			<button :id="id8"  @click="clickButton" class="buttonitem1 color2" hover-class="shadow1">.</button>
			<button :id="id9"  @click="equal" class="buttonitem1 color2" hover-class="shadow1">=</button>
		</view>
	</view>
	</view>
</template>

<script>
// @ts-nocheck
	// components/feedback/feedback.js
	export default {
		data() {
			return {
				result: "0",
				id1: "clear",
				id2: "back",
				id3: "time",
				id4: "div",
				id5: "mul",
				id6: "sub",
				id7: "add",
				id8: "dot",
				id9: "eql",
				id10: "num_0",
				id11: "num_1",
				id12: "num_2",
				id13: "num_3",
				id14: "num_4",
				id15: "num_5",
				id16: "num_6",
				id17: "num_7",
				id18: "num_8",
				id19: "num_9",
				buttonDot: false,
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			isShow: {
				type: Boolean,
				default: 'false'
			}
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			 clickButton: function (e) {
			    console.log(e);
			    var buttonVal = e.target.id;
			    var res = this.result;
			    var newbuttonDot = this.buttonDot;
			    var sign;
			    if (buttonVal >= "num_0" && buttonVal <= "num_9") {
			      var num = buttonVal.split('_')[1];
			      if (res == "0" || res.charAt(res.length - (length - 1)) == "=") {
			        res = num;
			      }
			      else {
			        res = res + num;
			      }
			    }
			    else {
			      if (buttonVal == "dot") {
			        if (!newbuttonDot) {
			          res = res + '.';
			        }
			      }
			      else if (buttonVal == "clear") {
			        res = '0';
			      }
			      else if (buttonVal == "back") {
			        var length = res.length;
			        if (length > 1) {
			          res = res.substr(0, length - 1);
			        }
			        else {
			          res = '0';
			        }
			      }
			      else if (buttonVal == "div" || buttonVal == "mul" || buttonVal == "sub" || buttonVal == "add") {
			        switch (buttonVal) {
			          case "div":
			            sign = '÷';
			            break;
			          case "mul":
			            sign = '×';
			            break;
			          case "sub":
			            sign = '-';
			            break;
			          case "add":
			            sign = '+';
			            break;
			        }
			        res = res + sign;
			      }
			    }
				this.result =res
				this.buttonDot =newbuttonDot
			  },
			  equal: function (e) {
			    var str = this.result;
			    var item = '';
			    var strArray = [];
			    var temp = 0;
			    for (var i = 0; i <= str.length; i++) {
			      var s = str.charAt(i);
			      if ((s != '' && s >= '0' && s <= '9') || s == '.') {
			        item = item + s;
			      }
			      else {
			        strArray[temp] = item;
			        temp++;
			        strArray[temp] = s;
			        temp++;
			        item = '';
			      }
			    }
			    if (isNaN(strArray[strArray.length - 1])) {
			      strArray.pop();
			    }
			    var num;
			    var res = strArray[0] * 1;
			    for (var i = 1; i <= strArray.length; i = i + 2) {
			      num = strArray[i + 1];
			      switch (strArray[i]) {
			        case "-":
			          res = res - num;
			          break;
			        case "+":
			          res = parseInt(res) + parseInt(num);
			          break;
			        case "×":
			          res = res * num;
			          break;
			        case "÷":
			          if (num != '0') {
			            res = res / num;
			          }
			          else {
			            res = '∞';
			            break;
			          }
			          break;
			      }
			    }
				this.result = '=' + res
			  },

			previewImage() {
				console.log('占位：函数 previewImage 未声明');
			}
		},
		created: function() {}
	};
</script>
<style>
		/* pages/cal/cal.wxss */
		page {
			/* background: #FF9900; */
		}

		.screen {
			position: fixed;
			color: #FF9900;
			font-size: 30px;
			bottom: 780rpx;
			text-align: right;
			width: 730rpx;
			word-wrap: break-word;
		}

		.content {
			position: fixed;
			bottom: 0;
			margin-bottom: 20rpx;
		}

		.buttonGroup {
			display: flex;
			flex-direction: row;
		}

		.buttonitem {
			text-align: center;
			line-height: 148rpx;
			width: 192rpx;
			border-radius: 0;
		}

		.buttonitem1 {
			width: 255rpx;
			text-align: center;
			line-height: 148rpx;
			border-radius: 0;
		}

		icon {
			position: absolute;
			top: 30rpx;
			left: 67rpx;
		}

		.color1 {
			background: #FFFFFF;
		}

		.color2 {
			background: #FFFFFF;
		}

		.color3 {
			background: #FFFFFF;
		}

		.shadow {
			background: #FFFFFF;
		}

		.shadow0 {
			background: #FFFFFF;
		}

		.shadow1 {
			background: #FFFFFF;
		}

		.shadow2 {
			background: #FFFFFF;
		}

		.shadow3 {
			background: #FFFFFF;
		}

		.shadow4 {
			background: #FFFFFF;
		}

		.shadow5 {
			background: #FFFFFF;
		}

		.shadow6 {
			background: #FFFFFF;
		}

		.shadow7 {
			background: #FFFFFF;
		}

		.shadow8 {
			background: #FFFFFF;
		}

		.shadow9 {
			background: #FFFFFF;
		}
</style>
